<template>
	<view class="guardians-page bgguardiansbg">
		<u-sticky :bgColor="scrollTop > 20?'#110124':'transparent'" customNavHeight="0" offsetTop="0" class="z-index">
			<u-navbar title="" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick">
				<view slot="center">
					<u-tabs :list="topTab" lineWidth="30" lineColor="#ffffff" :activeStyle="{
			        color: '#FFFFFF',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: 'rgba(255, 255, 255, 0.7)',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeClub"></u-tabs>
				</view>
			</u-navbar>

			<u-gap height="150" bgColor="transparent"></u-gap>
			<view class="flex align-center bgrgba1 rounded-circle h-68 justify-between px-1 dateTab">
				<view class="text-white fs-28 font-weight-light dateTabitem rounded-circle  text-center"
					v-for="(item,index) in dateTab" :key="index" :class="currentDateName === item.type?'bg110124':''"
					@tap="changeDateTab(item)">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bgColor="transparent"></u-gap>
		</u-sticky>
		<u-gap height="250" bgColor="transparent"></u-gap>
		<view class="rank-list bglg10 rounded-top-lg py-3">
			<view class="bglg7 rounded-lg p-2 mx-3 mb-2 flex align-center" v-for="(item,index) in dataList.slice(0,3)"
				:key="index">
				<image :src="`/static/imgs/guardians_top${index + 1}.png`" mode="aspectFill" class="position-relative"
					style="width: 52rpx;height: 80rpx;margin-top:-20px;"></image>
				<view class="flex align-center" style="width: 250rpx;">
					<image :src="item.avatar" mode="aspectFill" class="rounded-circle mx-2" style="width: 88rpx;height: 88rpx;">
					</image>
					<text class="fs-28 font-weight-bold text-black flex-1">{{item.nickname}}</text>
				</view>
				<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				<text class="ftFF685E fs-24 ml-1">{{abbreviateNumber(item.fire_balance)}}</text>
				<view class="flex align-center" style="width: 250rpx;">
					<image :src="item.boss_avatar" mode="aspectFill" class="rounded-circle mx-2"
						style="width: 88rpx;height: 88rpx;"></image>
					<text class="fs-28 font-weight-bold text-black flex-1">{{item.boss_nickname}}</text>
				</view>
			</view>
			<nodata v-if="dataList.length === 0"></nodata>

			<view v-for="(item,index) in dataList.slice(3)" :key="index"
				class="bglg5 rounded-lg p-2 mx-3 mb-2 flex align-center">
				<text class="ft574C70 fs-28 font-weight-bold text-center" style="width: 52rpx;">{{index + 4}}</text>
				<view class="flex align-center" style="width: 250rpx;">
					<image :src="item.avatar" mode="aspectFill" class="rounded-circle mx-2" style="width: 88rpx;height: 88rpx;">
					</image>
					<text class="fs-28 font-weight-bold text-black flex-1">{{item.nickname}}</text>
				</view>
				<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				<text class="ftFF685E fs-24 ml-1">{{abbreviateNumber(item.fire_balance)}}</text>
				<view class="flex align-center" style="width: 250rpx;">
					<image :src="item.boss_avatar" mode="aspectFill" class="rounded-circle mx-2"
						style="width: 88rpx;height: 88rpx;"></image>
					<text class="fs-28 font-weight-bold text-black flex-1">{{item.boss_nickname}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		abbreviateNumber
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				curentClub: 1,
				currentDateName: 1,
				scrollTop: 0,
				page: 1,
				dataList: [],
				tempList: [],
			}
		},
		computed: {
			topTab() {
				return [{
					name: this.$t('hhh.t152'),
					type: 1
				}, {
					name: this.$t('hhh.t153'),
					type: 0
				}]
			},
			dateTab() {
				return [{
						name: this.$t('hhh.t154'),
						type: 1
					},
					{
						name: this.$t('hhh.t155'),
						type: 2
					},
					{
						name: this.$t('hhh.t156'),
						type: 3
					},
				]
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.rankGuard()
		},
		created() {
			this.rankGuard()
		},
		methods: {
			abbreviateNumber,
			changeClub(val) {
				this.curentClub = val.type
				this.page = 1
				this.dataList = []
				uni.$tools.showLoading()
				this.rankGuard()
			},
			rankGuard() {
				HttpApi.rankGuard({
					is_global: this.curentClub,
					type: this.currentDateName,
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			changeDateTab(item) {
				this.currentDateName = item.type
				this.page = 1
				this.dataList = []
				uni.$tools.showLoading()
				this.rankGuard()
			},

		}
	}
</script>

<style lang="scss">
	.guardians-page {
		.dateTab {
			margin: 0 108rpx;
		}

		.dateTabitem {
			width: 30%;
			height: 56rpx;
			line-height: 56rpx;
		}

		.rank-list {
			min-height: calc(100dvh - 545rpx);

			.topbox {
				width: 250rpx;

				.avatar {
					margin-top: -78rpx;
				}
			}

			.top-one {
				left: 50%;
				transform: translateX(-125rpx);
				z-index: 999;
			}
		}
	}
</style>